<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>百度地图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>

    <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=X8as5aIx5QE6Eb1LqhKtqmINEG0ZYyXw"></script>
</head>
<body>

<div id="container"></div>

<div id="r-result"><input type="text" id="suggestId" size="20" value=""/></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

<style>

    #r-result {
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 9999999;
    }

    #suggestId {
        height: 30px;
        width: 400px;
    }

    .layui-btn {
        display: inline-block;
        height: 38px;
        line-height: 38px;
        padding: 0 18px;
        background-color: #009688;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border: none;
        border-radius: 2px;
        cursor: pointer;
        position: absolute;
        right: 10px;
        bottom: 10px;
        z-index: 9999999;
    }
</style>
<button type="button" class="layui-btn">点击确认</button>


</body>
</html>
<script>

    var map = new BMapGL.Map('container');

    var point = new BMapGL.Point(108.95, 34.27);

    map.centerAndZoom(point, 13);
    map.enableScrollWheelZoom(true);

    //var myIcon = new BMapGL.Icon("/Modules/chinadmin/assets/img/shigu.png",new BMapGL.Size(24, 32));    //红事故
    var myIcon = new BMapGL.Icon("/Modules/chinadmin/assets/img/weixiudian.png", new BMapGL.Size(24, 32)); //黑维修点

    var marker = new BMapGL.Marker(point, {
        enableDragging: true,   //可拖拽
        icon: myIcon
    });
    map.addOverlay(marker);

    marker.addEventListener("dragend", function (e) { //监听标注的dragend拖动事件 事件，获取拖拽后地理坐标
        console.log(e.point);
    });

    $(".layui-btn").click(function () {
        alert(111111);
    });


    //搜索功能
    var ac = new BMapGL.Autocomplete(    //建立一个自动完成的对象
        {
            "input": "suggestId"
            , "location": map
        });

    ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        alert(1111);
        setPlace();
    });

    function setPlace() {
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun() {
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果

            console.log(pp);

            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMapGL.Marker(pp));    //添加标注
        }

        var local = new BMapGL.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }

</script>